<template>
  <div class="preview-box">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">法人身份证人像面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpCardFrontRequest"
              :file-list="cardFrontList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.cardFrontUrl"
                :src="merchantForm.cardFrontUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.cardFrontUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">法人身份证国徽面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpCardReverseRequest"
              :file-list="cardReverseList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.cardReverseUrl"
                :src="merchantForm.cardReverseUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.cardReverseUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">法人手持身份证</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httphandHeldRequest"
              :file-list="handHeldList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.handHeldUrl"
                :src="merchantForm.handHeldUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.handHeldUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">营业执照原件照片</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpRoaLicenseRequest"
              :file-list="roaLicenseFileList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.licensePicUrl"
                :src="merchantForm.licensePicUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.licensePicUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">联系人身份证人像面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpContactFrontPicRequest"
              :file-list="contactFrontPicList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.contactFrontPicUrl"
                :src="merchantForm.contactFrontPicUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.contactFrontPicUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">联系人身份证国徽面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpContactReversePicRequest"
              :file-list="contactReversePicList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.contactReversePicUrl"
                :src="merchantForm.contactReversePicUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.contactReversePicUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">控股人身份证人像面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpholdPrsnCertMfgPicRequest"
              :file-list="holdPrsnCertMfgPicList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.holdPrsnCertMfgPicUrl"
                :src="merchantForm.holdPrsnCertMfgPicUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.holdPrsnCertMfgPicUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">控股人身份证国徽面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpholdPrsnCertExpPicRequest"
              :file-list="holdPrsnCertExpPicList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.holdPrsnCertExpPicUrl"
                :src="merchantForm.holdPrsnCertExpPicUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.holdPrsnCertExpPicUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">受益人身份证人像面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpreceiptorCertMfgPicRequest"
              :file-list="receiptorCertMfgPicList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.receiptorCertMfgPicUrl"
                :src="merchantForm.receiptorCertMfgPicUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.receiptorCertMfgPicUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">受益人身份证国徽面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpreceiptorCertExpPicRequest"
              :file-list="receiptorCertExpPicList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.receiptorCertExpPicUrl"
                :src="merchantForm.receiptorCertExpPicUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.receiptorCertExpPicUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">业务办理授权函</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpAuthLetterPicRequest"
              :file-list="authLetterPicList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.authLetterPicUrl"
                :src="merchantForm.authLetterPicUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.authLetterPicUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">非法人身份证人像面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpEcardFrontRequest"
              :file-list="ecardFrontList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.ecardFrontUrl"
                :src="merchantForm.ecardFrontUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.ecardFrontUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">非法人身份证国徽面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpEcardReverseRequest"
              :file-list="ecardReverseList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.ecardReverseUrl"
                :src="merchantForm.ecardReverseUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.ecardReverseUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">结算卡正面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpAccountFrontRequest"
              :file-list="accountFrontList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.accountFrontUrl"
                :src="merchantForm.accountFrontUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.accountFrontUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">结算卡反面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpAccountReverseRequest"
              :file-list="accountReverseList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.accountReverseUrl"
                :src="merchantForm.accountReverseUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.accountReverseUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">非法人结算授权书图片</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpBillingAttorneyRequest"
              :file-list="holdBillingAttorneyList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.billingAttorneyUrl"
                :src="merchantForm.billingAttorneyUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.billingAttorneyUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">开户许可证</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpOpenPermitRequest"
              :file-list="openPermitList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.openPermitUrl"
                :src="merchantForm.openPermitUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.openPermitUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">附加对公——开户许可证</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpcompanyAccPicRequest"
              :file-list="companyAccPicList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.companyAccPicUrl"
                :src="merchantForm.companyAccPicUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.companyAccPicUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">备用结算——结算卡正面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpreservedBalanceFront"
              :file-list="reservedBalanceFrontList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.reservedBalanceFrontUrl"
                :src="merchantForm.reservedBalanceFrontUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.reservedBalanceFrontUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">备用结算——结算卡反面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpreservedBalanceReverse"
              :file-list="reservedBalanceReverseList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.reservedBalanceReverseUrl"
                :src="merchantForm.reservedBalanceReverseUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.reservedBalanceReverseUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">商户门头照片</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpmerchantDoorRequest"
              :file-list="merchantDoorList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.merchantDoorUrl"
                :src="merchantForm.merchantDoorUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.merchantDoorUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">内景照片</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpinteriorRequest"
              :file-list="interiorList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.interiorUrl"
                :src="merchantForm.interiorUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.interiorUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">收银台照片</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpCheckoutCounterRequest"
              :file-list="checkoutCounterList"
              :before-upload="beforeUpload">
                <el-image
                    style="width: 100%; height: 100%"
                    v-if="merchantForm.checkoutCounterUrl"
                    :src="merchantForm.checkoutCounterUrl"
                    fit="cover"
                    >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.checkoutCounterUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">收单协议首页</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpacquiringRequest"
              :file-list="acquiringList"
              :before-upload="beforeUpload">
                <el-image
                    style="width: 100%; height: 100%"
                    v-if="merchantForm.acquiringUrl"
                    :src="merchantForm.acquiringUrl"
                    fit="cover"
                    >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.acquiringUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">收单协议盖章页</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpstampRequest"
              :file-list="stampList"
              :before-upload="beforeUpload">
                <el-image
                    style="width: 100%; height: 100%"
                    v-if="merchantForm.stampUrl"
                    :src="merchantForm.stampUrl"
                    fit="cover"
                    >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.stampUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">经营业务</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpbusinessRequest"
              :file-list="businessList"
              :before-upload="beforeUpload">
                <el-image
                    style="width: 100%; height: 100%"
                    v-if="merchantForm.businessUrl"
                    :src="merchantForm.businessUrl"
                    fit="cover"
                    >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.businessUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">租赁合同第一页</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpleaseholdFirstRequest"
              :file-list="leaseholdFirstList"
              :before-upload="beforeUpload">
                <el-image
                    style="width: 100%; height: 100%"
                    v-if="merchantForm.leaseholdFirstUrl"
                    :src="merchantForm.leaseholdFirstUrl"
                    fit="cover"
                    >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.leaseholdFirstUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">租赁合同第二页</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpleaseholdSecondRequest"
              :file-list="leaseholdSecondList"
              :before-upload="beforeUpload">
                <el-image
                    style="width: 100%; height: 100%"
                    v-if="merchantForm.leaseholdSecondUrl"
                    :src="merchantForm.leaseholdSecondUrl"
                    fit="cover"
                    >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.leaseholdSecondUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">租赁合同第三页</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpleaseholdThirdRequest"
              :file-list="leaseholdThirdList"
              :before-upload="beforeUpload">
                <el-image
                    style="width: 100%; height: 100%"
                    v-if="merchantForm.leaseholdThirdUrl"
                    :src="merchantForm.leaseholdThirdUrl"
                    fit="cover"
                    >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.leaseholdThirdUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">租赁面积</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpareaPicRequest"
              :file-list="areaPicList"
              :before-upload="beforeUpload">
                <el-image
                    style="width: 100%; height: 100%"
                    v-if="merchantForm.areaPicUrl"
                    :src="merchantForm.areaPicUrl"
                    fit="cover"
                    >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.areaPicUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">授权书</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpauthCerRequest"
              :file-list="authCerList"
              :before-upload="beforeUpload">
                <el-image
                    style="width: 100%; height: 100%"
                    v-if="merchantForm.authCerUrl"
                    :src="merchantForm.authCerUrl"
                    fit="cover"
                    >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.authCerUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">定位照</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httppositioningPhotoRequest"
              :file-list="positioningPhotoList"
              :before-upload="beforeUpload">
                <el-image
                    style="width: 100%; height: 100%"
                    v-if="merchantForm.positioningPhotoUrl"
                    :src="merchantForm.positioningPhotoUrl"
                    fit="cover"
                    >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.positioningPhotoUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">客户经理与客户合影照片</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpclientPhotoRequest"
              :file-list="clientPhotoList"
              :before-upload="beforeUpload">
                <el-image
                    style="width: 100%; height: 100%"
                    v-if="merchantForm.clientPhotoUrl"
                    :src="merchantForm.clientPhotoUrl"
                    fit="cover"
                    >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.clientPhotoUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { uploadPrivateUrl } from "@/api/system/oss";
import canvasImg from '@/util/canvasImg';

export default {
  mixins: [canvasImg],
  props: {
    merchantForm: Object,
  },
  data() {
    return {
      cardFrontList: [], //法人身份证人像面
      cardReverseList: [], //法人身份证国徽面
      handHeldList: [], //法人手持身份证
      roaLicenseFileList: [], //营业执照原片照片
      contactFrontPicList: [], //联系人身份证人像面
      contactReversePicList: [], //联系人身份证国徽面
      holdPrsnCertMfgPicList: [], //控股人身份证人像面
      holdPrsnCertExpPicList: [], //控股人身份证国徽面
      receiptorCertMfgPicList: [], //受益人身份证人像面
      receiptorCertExpPicList: [], //受益人身份证国徽面
      authLetterPicList: [], //业务办理授权函
      ecardFrontList: [], //非法人身份证人像面
      ecardReverseList: [], //非法人身份证国徽面
      accountFrontList: [], //结算卡正面
      accountReverseList: [], //结算卡反面
      holdBillingAttorneyList: [], //非法人结算授权书图片
      openPermitList: [], //开户许可证
      companyAccPicList: [], //附加对公 开户许可证
      merchantDoorList: [], //商户门头照片
      interiorList: [], //内景照片
      checkoutCounterList: [], //收银台照片
      acquiringList: [], //收单协议首页照片
      stampList: [], //收单协议盖章页照片
      businessList: [], //经营业务照片
      leaseholdFirstList: [], //租赁合同第一页
      leaseholdSecondList: [], //租赁合同第二页
      leaseholdThirdList: [], //租赁合同第三页
      areaPicList: [], //租赁面积照片
      authCerList: [], //授权书照片
      positioningPhotoList: [], //定位照照片
      clientPhotoList: [], //客户经理与客户合影照片
    };
  },
  created() {},
  methods: {
    // beforeUpload(file) {
    //   this.compressPictures(file);
    // },
    /* 法人身份证人像面上传 */
    httpCardFrontRequest(option) {
      this.merchantForm.cardFront = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.cardFront = res.data.data.name;
        this.merchantForm.cardFrontUrl = res.data.data.link;
      });
    },
    /* 法人身份证国徽面上传 */
    httpCardReverseRequest(option) {
      this.merchantForm.cardReverse = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.cardReverse = res.data.data.name;
        this.merchantForm.cardReverseUrl = res.data.data.link;
      });
    },
    /* 法人手持身份证上传 */
    httphandHeldRequest(option) {
      this.merchantForm.handHeld = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.handHeld = res.data.data.name;
        this.merchantForm.handHeldUrl = res.data.data.link;
      });
    },
    /* 营业执照照片上传 */
    httpRoaLicenseRequest(option) {
      this.merchantForm.licensePic = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.licensePic = res.data.data.name;
        this.merchantForm.licensePicUrl = res.data.data.link;
      });
    },
    /* 联系人身份证人像面上传 */
    httpContactFrontPicRequest(option) {
      this.merchantForm.contactFrontPic = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.contactFrontPic = res.data.data.name;
        this.merchantForm.contactFrontPicUrl = res.data.data.link;
      });
    },
    /* 联系人身份证国徽面上传 */
    httpContactReversePicRequest(option) {
      this.merchantForm.contactReversePic = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.contactReversePic = res.data.data.name;
        this.merchantForm.contactReversePicUrl = res.data.data.link;
      });
    },
    /* 控股人身份证人像面上传 */
    httpholdPrsnCertMfgPicRequest(option) {
      this.merchantForm.holdPrsnCertMfgPic = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.holdPrsnCertMfgPic = res.data.data.name;
        this.merchantForm.holdPrsnCertMfgPicUrl = res.data.data.link;
      });
    },
    /* 控股人身份证国徽面上传 */
    httpholdPrsnCertExpPicRequest(option) {
      this.merchantForm.holdPrsnCertExpPic = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.holdPrsnCertExpPic = res.data.data.name;
        this.merchantForm.holdPrsnCertExpPicUrl = res.data.data.link;
      });
    },
    /* 受益人身份证人像面上传 */
    httpreceiptorCertMfgPicRequest(option) {
      this.merchantForm.receiptorCertMfgPic = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.receiptorCertMfgPic = res.data.data.name;
        this.merchantForm.receiptorCertMfgPicUrl = res.data.data.link;
      });
    },
    /* 受益人身份证国徽面上传 */
    httpreceiptorCertExpPicRequest(option) {
      this.merchantForm.receiptorCertExpPic = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.receiptorCertExpPic = res.data.data.name;
        this.merchantForm.receiptorCertExpPicUrl = res.data.data.link;
      });
    },
    /* 业务办理授权函上传 */
    httpAuthLetterPicRequest(option) {
      this.merchantForm.authLetterPic = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.authLetterPic = res.data.data.name;
        this.merchantForm.authLetterPicUrl = res.data.data.link;
      });
    },
    /* 非法人身份证国徽面上传 */
    httpEcardFrontRequest(option) {
      this.merchantForm.ecardFront = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.ecardFront = res.data.data.name;
        this.merchantForm.ecardFrontUrl = res.data.data.link;
      });
    },
    /* 非法人身份证人像面上传 */
    httpEcardReverseRequest(option) {
      this.merchantForm.ecardReverse = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.ecardReverse = res.data.data.name;
        this.merchantForm.ecardReverseUrl = res.data.data.link;
      });
    },
    /* 结算卡正面上传 */
    httpAccountFrontRequest(option) {
      this.merchantForm.accountFront = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.accountFront = res.data.data.name;
        this.merchantForm.accountFrontUrl = res.data.data.link;
      });
    },
    /* 结算卡反面上传 */
    httpAccountReverseRequest(option) {
      this.merchantForm.accountReverse = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.accountReverse = res.data.data.name;
        this.merchantForm.accountReverseUrl = res.data.data.link;
      });
    },
    /* 非法人结算授权书图片上传 */
    httpBillingAttorneyRequest(option) {
      this.merchantForm.billingAttorney = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.billingAttorney = res.data.data.name;
        this.merchantForm.billingAttorneyUrl = res.data.data.link;
      });
    },
    /* 开户许可证上传 */
    httpOpenPermitRequest(option) {
      this.merchantForm.openPermit = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.openPermit = res.data.data.name;
        this.merchantForm.openPermitUrl = res.data.data.link;
      });
    },
    /* 附加对公 开户许可证上传 */
    httpcompanyAccPicRequest(option) {
      this.merchantForm.companyAccPic = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.companyAccPic = res.data.data.name;
        this.merchantForm.companyAccPicUrl = res.data.data.link;
      });
    },
    /* 备用结算信息 结算卡正面 */
    httpreservedBalanceFront(option) {
      this.merchantForm.reservedBalanceFront = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.reservedBalanceFront = res.data.data.name;
        this.merchantForm.reservedBalanceFrontUrl = res.data.data.link;
      });
    },
    /* 备用结算信息 结算卡反面 */
    httpreservedBalanceReverse(option) {
      this.merchantForm.reservedBalanceReverse = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.reservedBalanceReverse = res.data.data.name;
        this.merchantForm.reservedBalanceReverseUrl = res.data.data.link;
      });
    },
    /* 商户门头照片上传 */
    httpmerchantDoorRequest(option) {
      this.merchantForm.merchantDoor = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.merchantDoor = res.data.data.name;
        this.merchantForm.merchantDoorUrl = res.data.data.link;
      });
    },
    /* 内景照片上传 */
    httpinteriorRequest(option) {
      this.merchantForm.interior = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.interior = res.data.data.name;
        this.merchantForm.interiorUrl = res.data.data.link;
      });
    },
    /* 收银台照片上传 */
    httpCheckoutCounterRequest(option) {
      this.merchantForm.checkoutCounter = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.checkoutCounter = res.data.data.name;
        this.merchantForm.checkoutCounterUrl = res.data.data.link;
      });
    },
    /* 收单协议首页上传 */
    httpacquiringRequest(option) {
      this.merchantForm.acquiring = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.acquiring = res.data.data.name;
        this.merchantForm.acquiringUrl = res.data.data.link;
      });
    },
    /* 收单协议盖章页上传 */
    httpstampRequest(option) {
      this.merchantForm.stamp = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.stamp = res.data.data.name;
        this.merchantForm.stampUrl = res.data.data.link;
      });
    },
    /* 经营业务上传 */
    httpbusinessRequest(option) {
      this.merchantForm.business = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.business = res.data.data.name;
        this.merchantForm.businessUrl = res.data.data.link;
      });
    },

    /* 租赁合同第一页上传 */
    httpleaseholdFirstRequest(option) {
      this.merchantForm.leaseholdFirst = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.leaseholdFirst = res.data.data.name;
        this.merchantForm.leaseholdFirstUrl = res.data.data.link;
      });
    },
    /* 租赁合同第二页上传 */
    httpleaseholdSecondRequest(option) {
      this.merchantForm.leaseholdSecond = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.leaseholdSecond = res.data.data.name;
        this.merchantForm.leaseholdSecondUrl = res.data.data.link;
      });
    },
    /* 租赁合同第三页上传 */
    httpleaseholdThirdRequest(option) {
      this.merchantForm.leaseholdThird = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.leaseholdThird = res.data.data.name;
        this.merchantForm.leaseholdThirdUrl = res.data.data.link;
      });
    },
    /* 租赁面积上传 */
    httpareaPicRequest(option) {
      this.merchantForm.areaPic = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.areaPic = res.data.data.name;
        this.merchantForm.areaPicUrl = res.data.data.link;
      });
    },
    /* 授权书上传 */
    httpauthCerRequest(option) {
      this.merchantForm.authCer = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.authCer = res.data.data.name;
        this.merchantForm.authCerUrl = res.data.data.link;
      });
    },
    /* 定位照上传 */
    httppositioningPhotoRequest(option) {
      this.merchantForm.positioningPhoto = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.positioningPhoto = res.data.data.name;
        this.merchantForm.positioningPhotoUrl = res.data.data.link;
      });
    },
    /* 客户经理与客户合影照片上传 */
    httpclientPhotoRequest(option) {
      this.merchantForm.clientPhoto = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.clientPhoto = res.data.data.name;
        this.merchantForm.clientPhotoUrl = res.data.data.link;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-upload {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/deep/.el-upload-list {
    display: none;
}

.preview-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .preview-content {
    flex: 1;
    border-radius: 10px;
    padding: 14px;
    height: auto;
    background: #F8F9FD;
    .preview-text {
      height: 30px;
      line-height: 30px;
    }
    .preview-img {
      border-radius: 10px;
      width: 100%;
      height: 140px;
      background: #ffffff;
    }
    .preview-upload {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 50px;
    }
  }
}
.preview-title {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 30px;
  span {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
}
span {
  // display: block;
  font-size: 14px;
  margin: 8px 0;
}
</style>